<template>
    <div id="box">
        <div>{{ $route.meta.title }}</div>
        <button @click="changecolor">changecolor</button>
        <div :class="bg"></div>
        <!-- :class="[三目运算]" -->
        <button @click="changeflag">changeflag</button>
        <div :class="[flag ? 'bg-light' : 'bg-dark']"></div>
        <!-- :class="{'name1':true,'name2':false}" -->
        <ul>
            <li v-for="item, index in arr" :key="index"
                :class="{ 'bg-success': item % 2 == 0, 'bg-warning': item % 2 == 1 }"></li>
        </ul>
        <!-- :style="{}"  -->
        <div :style="{ 'background': color }" style="display: block;"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bg: 'bg-success',
            flag: true,
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            color: 'blue'
        }
    },
    methods: {
        changecolor() {
            this.bg = 'bg-info';
        },
        changeflag() {
            this.flag = !this.flag;
        }
    }
}
</script>
<style>
#box div {
    width: 100px;
    height: 100px;
}

li {
    width: 100px;
    height: 20px;
}
</style>